<template>
    <div class="el-bkgd-white el-pd-user">
        <div class="set-container el-box-init el-mx-600">
            <div class="set-head">
                <i class="el-icon-edit-outline"></i>
                <div class="title">修改资料</div>
            </div>
            <div class="set-body">
                <el-form
                    v-loading="loading"
                    :model="form"
                    :ref="ref"
                    label-width="90px"
                    size="small"
                >
                    <el-form-item label="用户账号">
                        <el-col :span="12">
                            <el-input v-model="form.account" disabled />
                        </el-col>
                        <el-col :span="10">
                            <div class="desc">
                                注册时间：{{ form.createdAt | formatTime }}
                            </div>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="用户邮箱">
                        <el-col :span="12">
                            <el-input v-model="form.email" />
                        </el-col>
                        <el-col :span="10">
                            <div class="desc">如：name@website.com</div>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="用户名称">
                        <el-col :span="12">
                            <el-input v-model="form.name" />
                        </el-col>
                        <el-col :span="10">
                            <div class="desc">如：李小明</div>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="头像">
                        <Uploader
                            v-model="form.avatar"
                            :on-success="thumbUpload"
                            :on-remove="removeThumbUpload"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="onSubmit(ref)">
                            保存
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { user as Api } from "../../api";

export default {
    data() {
        return {
            loading: false,
            ref: "formRef",

            // 表单
            form: {
                account: "",
                name: "",
                email: "",
                avatar: "",
                createdAt: "",
            },
        };
    },
    mounted() {
        this.getById();
    },
    methods: {
        /* 获取详情 */
        async getById() {
            this.loading = true;
            const { code, msg, data } = await this.$axios.$get(Api.getById);

            if (code == 200) {
                this.form = {
                    account: data.account,
                    name: data.name,
                    email: data.email,
                    avatar: data.avatar_url,
                    createdAt: data.created_at,
                };

                this.loading = false;
            }
        },
        /* 图片上传 */
        thumbUpload(fileStr) {
            this.form.avatar = fileStr;
        },

        /* 删除图片 */
        removeThumbUpload(fileStr) {
            this.form.avatar = fileStr;
        },

        /* 确认按钮 */
        async onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                }
            });

            if (this.loading) {
                let params = {
                    account: this.form.account,
                    name: this.form.name,
                    email: this.form.email,
                    avatar_url: this.form.avatar,
                };

                const { code, msg, data } = await this.$axios.$post(
                    Api.update,
                    params
                );

                if (code == 200) {
                    this.$msg.success(msg);
                    this.$store.commit("SET_USER_INFO", data.userInfo);
                    this.loading = false;
                } else {
                    this.$msg.error(msg ? msg : data);
                }
            }
        },
    },
};
</script>